//创建列表类
class todo_list {
  constructor() {
    this.content = $(".content");
    this.cur_list = [];
  }

  init() {
    this.get_list();
  }

  //----------------------获取列表-----------------------------
  get_list() {
    let that = this;
    // ajax获得数据
    let options = {
      url: "http://localhost:3000/list",
      //成功
      success: function (res) {
        that.cur_list = JSON.parse(res);
        //渲染页面
        that.render(that.content);
      },
    };
    ajax(options);
  }
  //----------------------------------添加事项-----------------------------
  add_item(data_add) {
    let that = this;
    // ajax获得数据
    let options = {
      methods: "POST",
      data: data_add,
      url: "http://localhost:3000/list",
      headers: { "Content-Type": "application/json" },
      //成功
      success: function (res) {
        that.cur_list = [];
        that.cur_list.push(JSON.parse(res));
        // //渲染页面
        that.render(that.content);
      },
    };
    ajax(options);
  }
  //----------------------------------删除事项-----------------------------
  del_item(id) {
    let that = this;

    var del_list = that.content.children("div");
    // 过滤器匹配要删除的节点
    var del_target = del_list.filter(function (i) {
      var flag = del_list[i].dataset.index;
      return flag == id;
    });

    let url_str = `http://localhost:3000/list/${id}`;
    // ajax获得数据
    let options = {
      methods: "DELETE",
      url: url_str,
      //成功
      success: function () {
        //渲染页面
        // that.render(that.content);
        // location.reload();
        del_target.remove();
      },
    };
    ajax(options);
  }

  //-------------------------------渲染页面-------------------------------------------
  render(con) {
    var list_html = this.cur_list.map(function (item) {
      var html = ` <div data-index=${item.id}>
      <span class="info" >${item.name}</span>
      <span class="del_logo">×</span>
      </div>`;

      return $(html);
    });

    list_html.forEach(function (item) {
      con.append(item);
    });

    this.dyeing();
  }

  //----------------加颜色--------------------------------
  dyeing() {
    let dye_items = $(".content div");
    let color_name = "yellow";

    for (let i = 1; i <= dye_items.length; i++) {
      // 获取id来匹配颜色
      var tmp = Number(dye_items[i - 1].dataset.index);
      if (tmp % 3 == 0) {
        color_name = "yellow";
      }
      if (tmp % 3 == 1) {
        color_name = "red";
      }
      if (tmp % 3 == 2) {
        color_name = "green";
      }

      $(dye_items[i - 1]).addClass(color_name);
    }
  }
}

// 获取body的jquery对象
let body = $("body");
//获取输入框字符
let input_area = $(".input input");

let td = new todo_list();
//初始化
td.init();
// td.init();
// console.log(td.cur_list);
// td.render();

// 全局委托点击事件
body.bind("click", function (evt) {
  target = evt.target;
  // 添加按钮的事件
  if (target.className.includes("add_btn")) {
    // 判断文本框有字符
    if (input_area.val().trim()) {
      var data = {
        name: input_area.val().trim(),
      };
      td.add_item(data);

      //清空文本框
      input_area[0].value = "";
    }
  }

  // 删除按钮的事件
  if (target.className.includes("del_logo")) {
    var id = target.parentNode.dataset.index;

    td.del_item(id);
  }
});

// 文本框回车输入事件
input_area.bind("keydown", function (evt) {
  if (evt.keyCode == 13) {
    // 判断文本框有字符
    if (input_area.val().trim()) {
      var data = {
        name: input_area.val().trim(),
      };
      td.add_item(data);

      //清空文本框  
      input_area[0].value = "";
    }
  }
});
